<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>料架计算</title>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-plus@2.9.4/dist/index.css">
  <!-- Vue -->
  <script src="https://unpkg.com/vue@3.5.13/dist/vue.global.js"></script>
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/element-plus@2.9.4/dist/index.full.js"></script>
  <!-- <script src="https://cdn.jsdelivr.net/npm/core-js@3"></script> -->
  <script src="https://unpkg.com/axios@1.8.1/dist/axios.min.js"></script>

  <link rel="stylesheet" href="css/index.css">
</head>

<body>
  <div id="app">
    <main>
      <div class="main">
        <div class="row-a1">
          <div class="form">
            <el-form :inline="true" :model="form" label-width="80px">
              <el-row>
                <el-col :span="11">
                  <el-form-item label="料架类型:" style="width: 100%;">
                    <el-select v-model="form.materialRack" placeholder="请选择料架" @change="getMaterialList">
                      <el-option v-for="(item,index) in materialRackList" :label="item.label" :value="item.label">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <div class="menu">
                    <div class="btns">
                      <div class="btn">
                        <el-button type="success" round @click="add">增加</el-button>
                      </div>
                      <div class="btn">
                        <el-button type="primary" round @click="count">计算</el-button>
                      </div>
                      <div class="btn">
                        <el-button type="info" round @click="clear">清空</el-button>
                      </div>
                    </div>
                    <div class="upload">
                      <el-upload v-model:file-list="fileList" @success="upload" class="upload-demo" action="/upload" multiple :limit="1">
                        <el-button type="primary">上传料架数据</el-button>
                      </el-upload>
                    </div>
                  </div>
                </el-col>
                <el-col :span="2"></el-col>
              </el-row>
              <el-row v-for="(item,index) in form.list">
                <el-col :span="11">
                  <el-form-item label="物料类型:" style="width: 100%;">
                    <el-select v-model="item.material" filterable placeholder="请选择物料" @click="materialValidate">
                      <el-option v-for="(item,index) in materialList" :label="item['料盘']" :value="item['料盘']">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item label="物料数量:" style="width: 100%;">
                    <el-input-number v-model="item.num" placeholder="请输入物料数量"></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="2">
                  <div class="btn">
                    <el-button type="danger" round @click="del(index)">删除</el-button>
                  </div>
                </el-col>
              </el-row>
            </el-form>
          </div>
          <div class="table">
            <!-- <el-table :data="tableData" style="width: 100%">
              <el-table-column prop="material" label="物料名称">
              </el-table-column>
              <el-table-column prop="demandNum" label="需求数量">
              </el-table-column>
              <el-table-column prop="supplyNum" label="设计数量">
              </el-table-column>
              <el-table-column prop="diff" label="差异">
              </el-table-column>
              <el-table-column prop="materialRack" align="center" label="取整料架数量(台)">
                <template v-slot:default="scope">
                  <el-tag type="success" effect="dark" v-if="scope.row.materialRack !=null">
                    {{ scope.row.materialRack }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="materialLayer" align="center" label="取整料架层数量(层)">
                <template v-slot:default="scope">
                  <el-tag type="success" effect="dark" v-if="scope.row.materialLayer !=null">
                    {{ scope.row.materialLayer }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="单层数量" label="料架层设计数量">
              </el-table-column>
              <el-table-column prop="总数" label="料架设计数量">
              </el-table-column>
              <el-table-column prop="层数" label="料架设计层数">
              </el-table-column>
            </el-table> -->
            <el-table :data="tableData" style="width: 100%">
              <el-table-column prop="material" label="物料名称">
              </el-table-column>
              <el-table-column prop="demandNum" label="需求数量">
              </el-table-column>
              <el-table-column prop="supplyNum" label="设计数量">
              </el-table-column>
              <el-table-column prop="diff" label="差异">
              </el-table-column>
              <el-table-column prop="materialRack" align="center" label="取整料架数量(台)">
                <template v-slot:default="scope">
                  <el-tag type="success" effect="dark" v-if="scope.row.materialRack !=null">
                    {{ scope.row.materialRack }}
                  </el-tag>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </main>
  </div>
</body>
<script>
  const {
    ElMessage
  } = ElementPlus;
  const {
    createApp,
    ref,
    reactive,
    // getCurrentInstance,
    onBeforeMount
  } = Vue;
  const app = createApp({
    setup() {
      const materialRackList = ref([{
          label: "NL",
          value: ""
        },
        {
          label: "NLP",
          value: ""
        },
        {
          label: "NL2",
          value: ""
        },
        {
          label: "NLP2",
          value: ""
        }
      ]);
      const materialList = ref([{}]);
      const fileList = ref([]);
      const form = reactive({
        materialRack: null,
        list: [{
          material: null,
          num: null
        }]
      });
      const tableData = ref([]);
      const add = function () {
        form.list.push({
          material: null,
          num: null
        });
      };
      const upload = function (file, fileList) {
        console.log(file.code);
        if(file.code != 200){
          ElMessage({
            message: file.msg,
            type: 'error',
          });
        }else{
          ElMessage({
            message: file.msg,
            type: 'success',
          });
        }
      }
      const del = function (index) {
        form.list.splice(index, 1);
      }
      const clear = function () {
        materialList.value = [{}];
        form.materialRack = null;
        form.list = [{
          material: null,
          num: null
        }];
        tableData.value = [];
      }
      const count = function () {
        if (form.list.length == 0) {
          ElMessage({
            message: '请添加物料',
            type: 'info',
          })
          return false;
        } else {
          for (let i = 0; i < form.list.length; i++) {
            if (form.list[i].material == null || form.list[i].num == null) {
              ElMessage({
                message: '请填写完整',
              });
              return false;
            }
          }
        };

        // 使用对象进行合并
        const merged = {};
        form.list.forEach(item => {
          if (merged[item.material]) {
            merged[item.material].num += item.num;
          } else {
            merged[item.material] = {
              ...item
            };
          }
        });
        // 转换回数组
        form.list = Object.values(merged);
        axios.post('/getMaterialRack', {
          form
        }).then(res => {
          if (res.data.code == 200) {
            tableData.value = res.data.data;
          } else {
            ElMessage({
              message: '请求失败',
              type: 'error',
            })
          }
        }).catch(err => {
          ElMessage({
            message: '请求失败',
            type: 'error',
          })
        });
      }
      const getMaterialList = function () {
        if (form.materialRack == null) {
          ElMessage({
            message: '请选择料架类型',
            type: 'info',
          })
          return;
        };
        form.list = [{
          material: null,
          num: null
        }];
        tableData.value = [];
        axios.get('/getMaterialList?type=' + form.materialRack).then(res => {
          if (res.data.code == 200) {
            materialList.value = res.data.data;
          } else {
            ElMessage({
              message: '请求失败',
              type: 'error',
            })
          }
        })
      };
      const materialValidate = function () {
        if (form.materialRack == null) {
          ElMessage({
            message: '请先选择料架类型',
            type: 'info',
          });
        };
        return false;
      };
      onBeforeMount(() => {

      });
      return {
        materialRackList,
        materialList,
        fileList,
        form,
        tableData,
        clear,upload,
        count,
        add,
        del,
        getMaterialList,
        materialValidate
      }
    }
  });

  app.use(ElementPlus);
  app.mount("#app");
</script>

</html>